import React, { Component } from 'react'
import {} from "antd"
import { request } from '../../api'
import {Form,Input, Row,Col, Select , Button, List, Avatar,Tag,DatePicker,Popconfirm,Table} from "antd"
import moment from "moment"
import mobxdata from "../../mobx/data"
import { annoTypeList } from '../../utils';
import { baseURL } from '../../api/ajax';
import {Link} from "react-router-dom"
const {Option} = Select 
const {RangePicker} = DatePicker


export default class AnnoList extends Component {
    state={
        list:[],
        columns: [
            {
                align: "center",
                title: "发布人",
                key: "author",
                dataIndex: "author"
            },
         
            {
                align: "center",
                title: "用户头像",
                key: "avatar",
                // dataIndex: "avatar",
                render: (text, item) =>{
                    console.log(item);
                    return (
                        <div style={{width:"100px",height:"100px"}}>
                            <img  style={{width:"100px",height:"100px"}} src={item.avatar.replace(/public/,baseURL)} alt=""/>
                        </div> 
                    )

                }
            },
            {
                align: "center",
                title: "通告等级",
                key: "category",
                dataIndex: "category",
                render: (text, a) => {

                    return (
                
                      <Tag  style={{margin:"0 5px"}} color={  annoTypeList.find(item=>item.type==a.category * 1).color }> {annoTypeList.find(item=>item.type==a.category * 1).title }  </Tag>
                    )
                }
            },
            {
                align: "center",
                title: "标题",
                key: "title",
                dataIndex: "title"
            },
          
            {
                align: "center",
                title: "内容",
                key: "content",
                dataIndex: "content",
              
            },
            {
                align: "center",
                title: "时间",
                key: "time",
                dataIndex: "time",
                render: (text, a) => {
                    return(
                        <div>    {moment(a.time).format('YYYY-MM-DD HH:MM:SS')}   </div>
                    )
                }
            },
            {
                align: "center",
                title: "操作",

                render: (text, item) => {
                    const { userinfo } = mobxdata
                    return (
                       <p>
                            <Popconfirm
                                title="你是否要删除"
                                onConfirm={()=>this.confirm(item)}
                                onCancel={this.cancel}
                                okText="删除"
                                cancelText="取消"
                            >
                                <Button type="danger" style={{ marginRight: 6 }} size="small">删除</Button>
                            </Popconfirm>

                            <Button type="danger" onClick={()=>this.updateItem(item)} style={{ marginRight: 6 }} size="small">修改</Button>
                        </p>
                        
                    )
                }
            },

        ],
    }
    componentDidMount(){
        request.addannolist()
        .then(res=>{
            console.log(res);
            mobxdata.getAnnoList(res.result)
           this.setState({
            list:res.result
           })
        })
    }
    render() {
        const {
            annoinfo,
            userinfo
        } = mobxdata
        return (
            <div>
                <h2> 通告列表</h2>
                <Form 
                    ref={el=>this.searchFrom=el}
                    onFinish={this.startSearchData}
                  
                >
                    <Row>
                        <Col span={8} >
                            <Form.Item
                                label="通告作者"
                                name="author"
                                
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8} offset={4}>
                            <Form.Item
                                label="发布时间"
                                name="time"   
                            >
                                <RangePicker />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8} >
                            <Form.Item
                                label="通告分类"
                                name="category"
                            >   
                                <Select
                                    placeholder="请选择"
                                    onChange={this.onGenderChange}
                                    allowClear
                                    >
                                     {
                                        annoTypeList.map((l,i)=>{
                                            return (
                                                <Option value={l.type} key={i}>
                                                    {l.title}
                                                </Option>
                                            )
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={8} offset={4}>
                            <Form.Item >   
                                <Button type="primary"  htmlType="submit"  >搜索</Button>
                                <Button type="" style={{margin:'0 8px'}} onClick={this.resetSearchForm}>重置</Button>
                                
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>

                {/* 渲染的通告列表                     */}
                <Table dataSource={this.state.list}
                    sticky
                    bordered
                    columns={this.state.columns}
                    pagination={{ pageSize: 5 }}
                    rowKey={(item) => item._id}
                >

                </Table>


                {/* <div style={{margin:"10px 0 "}}>
                    <List dataSource={this.state.list}
                        renderItem={
                            (l,i)=>(
                               
                                <List.Item 
                                    key={i}
                                    extra={
                                        userinfo.role > 1 && <Button onClick={()=>this.delAnnoOne(l)} type="danger" size="small" style={{margin:"0 6px"}}> 删除</Button>
                                      }
                                >

                                    <List.Item.Meta
                                        avatar={
                                            l.avatar?<Avatar src={l.avatar.replace(/public/,baseURL)} />
                                            :
                                            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                        }
                                        title={<Link to={"/main/anno/update/"+l._id}  >{l.title}  -  { moment(l.time).format('YYYY-MM-DD HH:MM:SS')}   
                                                <Tag  style={{margin:"0 5px"}} color={  annoTypeList.find(item=>item.type==l.category * 1).color }> {annoTypeList.find(item=>item.type==l.category * 1).title }  </Tag>
                                         </Link>}
                                        description={l.author}
                                        />
                                    <div>
                                        {l.content}
                                    </div>
                                </List.Item>
                            )
                        }
                    >

                    </List>
                </div> */}
                
            </div>
        )
    }
}
